<template>
	<view class="message">
		<!-- 顶部标签切换 -->
		<view class="message_tab">
			<view class="tab_item" @tap="message_tabBtn(1)">
				<view :class="currIndex == 1 ? 'activeImg' : ''" class="img">
					<image src="/static/wine-message/friendsBig.png" alt="">
				</view>
				<view class="friends" :class="currIndex == 1 ? 'active' : ''">好友</view>
			</view>
			<view class="tab_item" @tap="message_tabBtn(2)">
				<view :class="currIndex == 2 ? 'activeImg' : ''" class="img">
					<image src="/static/wine-message/group.png" alt="">
				</view>
				<view class="group" :class="currIndex == 2 ? 'active' : ''">群聊</view>
			</view>
			<view class="tab_item" @tap="message_tabBtn(3)">
				<view :class="currIndex == 3 ? 'activeImg' : ''" class="img">
					<image src="/static/wine-message/notice.png" alt="">
				</view>
				<view class="notice" :class="currIndex == 3 ? 'active' : ''">系统通知</view>
			</view>
			<view class="tab_item" @tap="message_tabBtn(4)">
				<view :class="currIndex == 4 ? 'activeImg' : ''" class="img">
					<image src="/static/wine-message/information.png" alt="">
				</view>
				<view class="information" :class="currIndex == 4 ? 'active' : ''">商家信息</view>
			</view>
		</view>
		<!-- 搜索 -->
		<view class="message_search">
			<view class="search">
				<view class="icon">
					<image src="/static/images/search.png" />
				</view>
				<view class="text">{{searchContent ? searchContent : '搜索'}}</view>
			</view>
			<view class="search_img">
				<img class="img" src="/static/wine-message/add.png" alt="">
			</view>
		</view>
		<!-- 消息列表 -->
		<view class="message_list">
			<view class="list_item">
				<view class="message_item_img">
					<img src="" alt="">
				</view>
				<view class="message_item_message">
					<view class="message_item_name">
						酒伴小美
					</view>
					<view class="message_item_list">
						<view class="message_item_newmessage">谢谢你给我点的果酒，很好喝</view>
						<view class="message_item_newmessage_time">16:40</view>
					</view>
				</view>
			</view>
			<view class="list_item">
				<view class="message_item_img">
					<img src="" alt="">
				</view>
				<view class="message_item_message">
					<view class="message_item_name">
						酒友阿朋
					</view>
					<view class="message_item_list">
						<view class="message_item_newmessage">啥时候来云喝酒云喝一下</view>
						<view class="message_item_newmessage_time">16:40</view>
					</view>
				</view>
			</view>
			<view class="list_item">
				<view class="message_item_img">
					<img src="" alt="">
				</view>
				<view class="message_item_message">
					<view class="message_item_name">
						酒友小王
					</view>
					<view class="message_item_list">
						<view class="message_item_newmessage">在平台上给你点了五粮液外卖，一会云喝！</view>
						<view class="message_item_newmessage_time">16:40</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currIndex: 1,
				searchContent: '',
			}
		},
		methods: {
			message_tabBtn(id) {
				this.currIndex = id
			}
		}
	}
</script>

<style>
	@import './message.css'
</style>